<template>
	<view class="login">
			<view class="main">
				<view class="head">
					<view class="icon">
						<image src="../../static/image/login.png" mode="widthFix"></image>
					</view>
				</view>
				
				<view class="info">
						<view class="item">
							<input @input='changeBJ = true' class="uni-input"  type="number" maxlength="11" v-model="mobile" placeholder='请输入手机号' placeholder-style="color:#cccccc">
						</view>
						<view class="item">
							<input class="uni-input passwordInput" password type="text"  minlength="8" maxlength="20" v-model="password" placeholder='请输入密码' placeholder-style="color:#cccccc">
						</view>
				</view>
				
				
				
			
				
			<view class="footer">
				<view class="login_btn" :class="{activeBj:changeBJ}" @click="login">登  录</view>
				<view class="login_bottom">
					<view @click="register">新用户注册</view>
					<view @click="findPassword">忘记密码</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
var util = require('../../common/util.js');
export default {
    data() {
        return {
            mobile: '',
            password: '',
            changeBJ: false
        };
    },
    methods: {
        login() {
            if (!util.isMobile(this.mobile)) {
                uni.showToast({
                    title: '输入账号或密码不正确！',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }

            if (this.password.length < 8 || this.password.length > 20) {
                uni.showToast({
                    title: '输入账号或密码不正确！',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            uni.showLoading({
                title: '正在登录...'
            });

            util.ajax(
                'userLogin',
                {
                    mobile: this.mobile,
                    password: this.password
                },
                data => {
                    uni.hideLoading();
                    let json = data.data;
                    if (json.status) {
                        uni.setStorageSync('token', json.data.token);
                        uni.setStorageSync('mobile', json.data.mobile);
                        uni.setStorageSync('id', json.data.id);
                        uni.setStorageSync('inviteUserId', json.data.inviteUserId);
                        uni.setStorageSync('code', json.data.code);
                        uni.showToast({
                            title: '登录成功',
                            icon: 'none',
                            duration: 600
                        });
                        setTimeout(() => {
                            uni.reLaunch({
                                url: '../project/index'
                            });
                        }, 1000);
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        register() {
            uni.navigateTo({
                url: './register'
            });
        },
        findPassword() {
            uni.navigateTo({
                url: './findPassword'
            });
        }
    },
    components: {
        uniIcon
    }
};
</script>

<style lang="less">
@import '../../common/icon.css';
// @import '../../common/uni.css';
.uni-input {
    width: 100%;
    padding-left: 0;
}
page {
    background: white;
}
.login {
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: auto;
    .main {
        flex-direction: column;
        padding: 0 40upx;
        box-sizing: border-box;
        .head {
            // border: 1px solid red;
            height: 300upx;
            color: #999999;
            font-size: 22upx;
            padding: 10upx 40upx 50upx;
            box-sizing: border-box;
            color: #ff1268;
            justify-content: center;
            align-items: center;
            .icon {
								width: 50%;
								image{
									width: 100%;
									height: 100%;
								} 
            }
        }
        .info {
            flex-direction: column;
            // background: white;
            width: 100%;
            margin: 0 auto;
            .item {
                flex-grow: 1;
                border-bottom: 1px solid #eeeeee;
                height: 100upx;
                align-items: center;
                input {
                    font-size: 30upx;
                    color: #333333;
                }
            }
        }
        .getCode {
            color: #ff1268;
            border-left: 1px solid #eeeeee;
            padding: 5upx 0;
            flex-grow: 2;
            justify-content: center;
        }
    }
    .footer {
        width: 100%;
        margin: 0 auto;
        flex-direction: column;
        .login_btn {
            background: #ff1268;
            color: white;
            font-size: 34upx;
            width: 100%;
            height: 100upx;
            justify-content: center;
            align-items: center;
            border-radius: 5upx;
            margin: 80upx auto 0;
            background: -webkit-linear-gradient(to right, #fabde6, #ffa0c2);
            background: -o-linear-gradient(to right, #fabde6, #ffa0c2);
            background: -moz-linear-gradient(to right, #fabde6, #ffa0c2);
            background: -mos-linear-gradient(to right, #fabde6, #ffa0c2);
            background: linear-gradient(to right, #fabde6, #ffa0c2);
        }
        .activeBj {
            background: -webkit-linear-gradient(to right, #ff48ac, #ff1268);
            background: -o-linear-gradient(to right, #ff48ac, #ff1268);
            background: -moz-linear-gradient(to right, #ff48ac, #ff1268);
            background: -mos-linear-gradient(to right, #ff48ac, #ff1268);
            background: linear-gradient(to right, #ff48ac, #ff1268);
            color: white;
        }
        .login_bottom {
            color: #666666;
            font-size: 24upx;
            justify-content: space-between;
            margin-top: 40upx;
        }
    }
}
</style>
